<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<?php
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
<style>
    .ui-menu-item{
        font-size: 20px;
        border: 1px solid silver;
        border-radius: 6px;
        height: 5   0px;
        
    }
    .labels{
        font-size: 20px;
        font-weight: bolder;
        color: blue;
    }
    .results{
        font-size: 25px;
        font-weight: bolder;
        color: red;
        font-family: Tahoma;
    }
    
    input[type="button"]{
        width: 250px;
        font-size: 20px;
        border: 1px solid blue;
        background: silver;
        border-radius: 5px;
    }
</style>
<script>
    function getWords(){
        var words = [];
        $.ajax({
            url:'?r=translate/Autocomplete',
            type:"post",
            dataType:"json",
            async:false,
            data:{
                word:$('#wordfield').val()
            },
            success:function(data){
                words =  data.words ;
            }
        })
    }

    $(function(){
        $('#wordfield').autocomplete(
            {
                source: function(request, response) {
                    $.ajax({
                        url: "?r=translate/Autocomplete",
                        dataType: "json",
                        data: {word:$('#wordfield').val()},
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                delay:50,
                minLength: 2
            }
        );
        
        $('#get').click(function(){
        $.ajax({
            url: "?r=translate/Translate",
                        dataType: "json",
                        data: {word:$('#wordfield').val()},
                        type:"post",
                        dataType:"json",
                        success: function(data) {
                            console.log(data);
                            $('#russian').text(data.ru);
                            $('#armenian').text(data.hy);
                        }
            })
        })

        $('#save').click(function(){
            $.ajax({
                url: "?r=translate/AddWord",
                data: {
                    addAjax:1,
                    english:$('#wordfield').val(),
                    russian:$('#russian').text(),
                    armenian:$('#armenian').text()
                },
                type:"post",
                success: function(data) {
                    console.log(data);
                }
            })
        })
    })
    
    

</script>

<input type="text" id="wordfield" style="font-size: 23px;" />
<br />
<input type="button" value="get" id="get"/>
<br /><br />
<label for="russian" class="labels">Russian: </label>
<span id="russian" class="results"></span>
<br />
<label for="armenian" class="labels">Armenian: </label>
<span id="armenian" class="results"></span>
<br />
<input type="button" id="save" value="Save word">
